<template>
	<view class="page-contanier">
		<view class="title">请先登录注册</view>
		<view class="img-box">
			<up-image :show-loading="true" src="/static/img/login-01.jpg" :fade="false"></up-image>
		</view>
		<view class="act-box">
			<view class="btn">
				<up-button shape="circle" color="#6586bf" @click="()=>toPage('/pages/register')">注册</up-button>
			</view>
			<view class="btn">
				<up-button class="btn" shape="circle" color="#f8744d" @click="()=>loginFormShow=true">登录</up-button>
			</view> 
			
			
			<view class="other-login" @click="handlerOtherLogin">第三方登录</view>
		</view>
		<up-popup :show="show" :round="10" @close="()=>show=false">
            <view class="other-login-title">
                选择其他方式登录
            </view>
			<view>
				<up-cell class="other-login-item" center @click="handlerWeixinLogin">
					<template #title>
						<view class="other-login-item-title">
							<view class="iconfont aa-weixin"></view>
							<view>微信登录</view>
						</view>
					</template>
				</up-cell>
				<up-cell class="other-login-item" center >
					<template #title>
						<view class="other-login-item-title">
							<view class="iconfont aa-weixin"></view>
							<view>微信登录</view>
						</view>
					</template>
				</up-cell>
				<up-cell class="other-login-item" center >
					<template #title>
						<view class="other-login-item-title">
							<view class="iconfont aa-weixin"></view>
							<view>微信登录</view>
						</view>
					</template>
				</up-cell>
			</view>
		</up-popup>
		<LoginForm v-model="loginFormShow" />
	</view>
</template>

<script setup lang="ts">
	import { ref,onMounted } from 'vue';
	import LoginForm from '../components/login/LoginForm.vue';
	import { useUserStore } from '../store/userStore';
	
	const userStore=useUserStore()

	const show=ref(false)

	const loginFormShow=ref(false)

	const handlerOtherLogin=()=>{
		show.value=true
	}

	const toPage=(url)=>{
		uni.redirectTo({
        	url:url
        })
	}

	const handlerWeixinLogin=()=>{
		console.log("进行微信登录")
		show.value=false
	}

	onMounted(async () => {
		if(userStore.getToken().length>0){
			toPage("/pages/index")
		}
	});

</script>

<style lang="scss">
	.other-login-item-title{
		display: flex;
		align-items: center;
		justify-content: center;
		.iconfont{
			margin-right: 10upx;
		}
		.aa-weixin{
			color:#1ba035
		}
	}
	.other-login-item{
		text-align: center;
	}
	.other-login-title{
		height: 90upx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		justify-content: center;
		border-bottom: 1px solid #f3f3f3;
	}
	.img-box{
		width: fit-content;
		margin: 0 auto;
		height: 754upx;
		display: flex;
		align-items: center;
	}
	page{
		background-color: #f6f6f6;
	}
	.act-box{
		display: flex;
		flex-direction: column;
    	align-items: center;
		.btn{
			font-size: 36upx;
			font-weight: bold;
			width: 580upx;
			margin-bottom: 32upx;
		}
	}
	.title {
		font-weight: bold;
		font-size: 46upx;
		text-align: center;
    	margin-top: 102upx;
	}
</style>
